import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { goods_detail } from '@/api/goods'

export default function () {
  let route = useRoute()
  let router = useRouter()
  let goodID = route.query.id
  let goods = ref<any>({})
  let prieveImg = ref()
  let goodsBanner = ref([])
  goods_detail({ id: goodID }).then((res: any) => {
    goods.value = res
    prieveImg.value = res.goods_img.split(',')[0]
    goodsBanner.value = res.goods_img.split(',')
    document.title = res.goods_name
  })
  const changeImg = (val: string) => {
    prieveImg.value = val
  }
  let num = ref(1)
  const handleChange = (e: any) => {
    console.log(e)
  }
  const addOrder = () => {
    let data = {
      goods_id: goods.value.id,
      goods_name: goods.value.goods_name,
      goods_img: goods.value.goods_img,
      goods_price: goods.value.goods_price,
      goods_num: num.value,
      goods_total: goods.value.price * num.value
    }
    router.push({
      path: '/order',
      query: { data: JSON.stringify(data) }
    })
  }
  return {
    prieveImg,
    goods,
    goodsBanner,
    num,
    changeImg,
    handleChange,
    addOrder
  }
}
